<template>
  <div class="doc_8">
    <p>上传和展示媒体文件，方便管理和编辑；</p>
    <p></p>

    <h2 id="doc_8_1">1. 图片</h2>
    <p>点击”媒体“，弹出如图所示面板。这个面板中有图片的类型，大小限制说明，有媒体管理按钮，点击”管理“按钮可以删除图片，如下图，选中需要删除的图片后，点击”删除“按钮可以删除一些你不在使用的媒体文件。在弹出图层中在点击任意媒体文件（如下图中的图片），</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560138278931-948c017a-9a3f-431c-9642-319b2d8a2daa.png?x-oss-process=image/resize,w_682" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560138315626-30dae2f0-53f2-4a90-ad18-05de7bd56bab.png?x-oss-process=image/resize,w_762" alt="">
      </span>
    </p>
    <p></p>
    <p>就可以将图片添加到编辑区域，如图，同时右侧面板会自动打开对应组件的的属性编辑面板，这个面板默认打开的都是图片的组件属性，而每个组件都有的通用属性默认是没有打开的。通用属性的说明请查看概述中的说明。</p>
    <p>看图中的链接地址，每个图片都可以添加链接地址，这样点击对用图片就可以使页面跳转到指定的url。除了可以在这里修改链接地址使页面跳转外，</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560138586120-b095d931-2104-433b-950c-5ca3410af9dc.png?x-oss-process=image/resize,w_1116" alt="">
      </span>
    </p>
    <p></p>
    <p>还可以添加链接类事件（网页链接）事件也是可以跳转页面的（如下图）。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560139011227-d694d2a6-b23c-4d55-ba26-0a33c38c68de.png?x-oss-process=image/resize,w_412" alt="">
      </span>
    </p>
    <p></p>
    <p>⚠️图片中还有一个属性值得说明下，如图在弹层页面中的图片，在组件属性中会多一个编辑属性（动态图片），这个按钮开关打开后，这个图片会根据微博事件参数动态的修改图片的地址。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560139205371-1c3bb1b1-fb02-4594-95be-a9164344e222.png?x-oss-process=image/resize,w_2000" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_8_2">2. 音频</h2>
    <p>操作基本和图片一样</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559182205711-58cb3dd5-d865-4e7f-98d1-63155174cc69.png?x-oss-process=image/resize,w_644" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_8_3">3. 视频</h2>
    <p>操作基本和图片一样，而这里只有一个属性需要特殊说明下</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559182237697-add9d4c1-5ac5-4394-9b20-bf6f18ba7ac3.png?x-oss-process=image/resize,w_648" alt="">
      </span>
    </p>
    <p></p>
    <p>如下图中的播放按钮颜色，由于h5页面的风格会有不用，设计稿有时会设计不同的播放按钮样式，我们可以通过这个属性来修改。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560139464569-07cf17e6-ae69-45a3-bc69-b6222a793963.png" alt="">
      </span>
    </p>
    <p></p>
  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
